<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="button" value="测试" id="test">

    <input type="button" value="错误" id="wrong">

    <input type="button" value="开始下载" id="start">
    <div id="percent">0%</div>



    <script src="/jquery-2.0.2.min.js"></script>
    <script src="/axios.min.js"></script>
    <script>
        function test() {
            // $.get('/download', { page: 1 }, function (d) {
            //     console.log(d);
            // }, 'arraybuffer');
            // $.ajax({
            //     url: '/download',
            //     method: 'GET',
            //     xhrFields: { responseType: 'arraybuffer' },
            //     data: {
            //         page: 1
            //     },
            //     success: function (d) {
            //         console.log(d);
            //     }
            // });
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/download?page=1', true);
            xhr.responseType = 'arraybuffer';
            xhr.onload = function (e) {
                buffer = xhr.response;
                console.log(buffer);
            };
            xhr.send();
        }
        async function wrong() {
            let response = await axios({
                method: 'get',
                url: '/wrong',
                responseType: 'arraybuffer'
            });

            console.log('old', response.data);
            let enc = new TextDecoder('utf-8');
            console.log('new', JSON.parse(enc.decode(new Uint8Array(response.data))));
        }

        var filedata = [];
        async function prepare() {
            let response = await axios({
                method: 'get',
                url: '/prepare',
                responseType: 'json'
            });
            return response.data.data;
        }
        async function get_file_data(page, total_page, mime, filename) {

            let response = await axios({
                method: 'get',
                url: '/download?page=' + page,
                responseType: 'arraybuffer'
            });

            $('#percent').html((page / total_page * 100).toFixed(2) + '%');

            filedata.push(response.data);
            if (page < total_page) {
                setTimeout(function () {
                    get_file_data(page + 1, total_page, mime, filename);
                }, 1000);

            } else {
                download(mime, filename);
            }

        }
        function download(mime, filename) {
            var blob = new Blob(filedata, { type: mime });
            var url = URL.createObjectURL(blob);
            var a = document.createElement('a');
            a.setAttribute('download', filename);
            a.href = url;
            a.click();
            URL.revokeObjectURL(a.href);
            filedata = [];
        }
        $(document).ready(function () {
            $('#test').click(async function () {
                test();
            });

            $('#wrong').click(async function () {
                wrong();
            });

            $('#start').click(async function () {
                let { total_page, mime, filename } = await prepare();
                get_file_data(1, total_page, mime, filename);
            });
        });
    </script>
</body>

</html>